<template>
  <view class="trust-leaderboard">
    <!-- 排行榜头部 -->
    <view class="leaderboard-header">
      <text class="leaderboard-title">{{ title }}</text>
      <text class="leaderboard-subtitle">{{ subtitle }}</text>
      
      <!-- 时间筛选 -->
      <view class="time-filter" v-if="showTimeFilter">
        <view 
          class="filter-item" 
          v-for="period in timePeriods" 
          :key="period.value"
          :class="{ active: selectedPeriod === period.value }"
          @click="selectPeriod(period.value)"
        >
          <text class="filter-text">{{ period.label }}</text>
        </view>
      </view>
    </view>
    
    <!-- 当前用户排名 -->
    <view class="current-user-rank" v-if="currentUserRank">
      <view class="rank-card">
        <view class="rank-info">
          <text class="rank-number">#{{ currentUserRank.rank }}</text>
          <text class="rank-label">我的排名</text>
        </view>
        <view class="user-info">
          <view class="user-avatar">
            <text class="avatar-icon">{{ currentUserRank.avatar }}</text>
          </view>
          <view class="user-details">
            <text class="user-name">{{ currentUserRank.name }}</text>
            <text class="user-trust">{{ currentUserRank.trustValue }} 信任值</text>
          </view>
        </view>
        <view class="rank-change" :class="getRankChangeClass(currentUserRank.change)">
          <text class="change-icon">{{ getRankChangeIcon(currentUserRank.change) }}</text>
          <text class="change-text">{{ getRankChangeText(currentUserRank.change) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 排行榜列表 -->
    <view class="leaderboard-list">
      <view 
        class="leaderboard-item" 
        v-for="(item, index) in leaderboardData" 
        :key="item.id"
        :class="getItemClass(index, item)"
        @click="selectUser(item)"
      >
        <!-- 排名 -->
        <view class="item-rank">
          <text class="rank-number">{{ index + 1 }}</text>
          <view class="rank-badge" :class="getRankBadgeClass(index)">
            <text class="badge-text">{{ getRankBadgeText(index) }}</text>
          </view>
        </view>
        
        <!-- 用户信息 -->
        <view class="item-user">
          <view class="user-avatar">
            <text class="avatar-icon">{{ item.avatar }}</text>
            <view class="avatar-status" :class="getStatusClass(item.status)" v-if="item.status"></view>
          </view>
          <view class="user-details">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-title">{{ item.title || '普通用户' }}</text>
            <view class="user-tags" v-if="item.tags && item.tags.length > 0">
              <text 
                class="user-tag" 
                v-for="tag in item.tags.slice(0, 2)" 
                :key="tag"
              >{{ tag }}</text>
            </view>
          </view>
        </view>
        
        <!-- 信任值 -->
        <view class="item-trust">
          <text class="trust-value">{{ item.trustValue }}</text>
          <text class="trust-label">信任值</text>
          <view class="trust-trend" :class="getTrendClass(item.trend)">
            <text class="trend-icon">{{ getTrendIcon(item.trend) }}</text>
            <text class="trend-text">{{ getTrendText(item.trend) }}</text>
          </view>
        </view>
        
        <!-- 特殊标识 -->
        <view class="item-badges" v-if="item.badges && item.badges.length > 0">
          <view 
            class="badge-item" 
            v-for="badge in item.badges" 
            :key="badge.id"
            :class="badge.type"
          >
            <text class="badge-icon">{{ badge.icon }}</text>
            <text class="badge-text">{{ badge.text }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !loading">
      <button class="load-more-btn" @click="loadMore">
        <text class="btn-text">加载更多</text>
      </button>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && leaderboardData.length === 0">
      <text class="empty-icon">📊</text>
      <text class="empty-text">暂无排行榜数据</text>
      <button class="refresh-btn" @click="refresh">
        <text class="btn-text">刷新</text>
      </button>
    </view>
    
    <!-- 统计信息 -->
    <view class="leaderboard-stats" v-if="showStats">
      <view class="stat-item">
        <text class="stat-label">总用户数</text>
        <text class="stat-value">{{ totalUsers }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">平均信任值</text>
        <text class="stat-value">{{ averageTrust }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">最高信任值</text>
        <text class="stat-value">{{ maxTrust }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import trustLeaderboardManager from '@/utils/trust-leaderboard-manager.js'

export default {
  name: 'TrustLeaderboard',
  props: {
    title: {
      type: String,
      default: '信任排行榜'
    },
    subtitle: {
      type: String,
      default: '看看谁最值得信任'
    },
    showTimeFilter: {
      type: Boolean,
      default: true
    },
    showStats: {
      type: Boolean,
      default: true
    },
    maxItems: {
      type: Number,
      default: 20
    }
  },
  
  data() {
    return {
      leaderboardData: [],
      currentUserRank: null,
      selectedPeriod: 'week',
      loading: false,
      hasMore: true,
      totalUsers: 0,
      averageTrust: 0,
      maxTrust: 0,
      timePeriods: [
        { label: '今日', value: 'today' },
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '全部', value: 'all' }
      ]
    }
  },
  
  onLoad() {
    this.loadLeaderboard()
  },
  
  methods: {
    // 加载排行榜数据
    async loadLeaderboard() {
      this.loading = true
      try {
        const data = await trustLeaderboardManager.getLeaderboard({
          period: this.selectedPeriod,
          limit: this.maxItems
        })
        
        this.leaderboardData = data.leaderboard
        this.currentUserRank = data.currentUserRank
        this.totalUsers = data.totalUsers
        this.averageTrust = data.averageTrust
        this.maxTrust = data.maxTrust
        this.hasMore = data.hasMore
      } catch (error) {
        console.error('Failed to load leaderboard:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 选择时间周期
    selectPeriod(period) {
      this.selectedPeriod = period
      this.loadLeaderboard()
    },
    
    // 加载更多
    async loadMore() {
      if (this.loading || !this.hasMore) return
      
      this.loading = true
      try {
        const data = await trustLeaderboardManager.getLeaderboard({
          period: this.selectedPeriod,
          limit: this.maxItems,
          offset: this.leaderboardData.length
        })
        
        this.leaderboardData = [...this.leaderboardData, ...data.leaderboard]
        this.hasMore = data.hasMore
      } catch (error) {
        console.error('Failed to load more:', error)
      } finally {
        this.loading = false
      }
    },
    
    // 刷新数据
    refresh() {
      this.leaderboardData = []
      this.hasMore = true
      this.loadLeaderboard()
    },
    
    // 选择用户
    selectUser(user) {
      this.$emit('user-selected', user)
    },
    
    // 获取项目样式类
    getItemClass(index, item) {
      const classes = []
      
      if (index < 3) {
        classes.push('top-three')
      }
      
      if (item.isCurrentUser) {
        classes.push('current-user')
      }
      
      if (item.highlight) {
        classes.push('highlighted')
      }
      
      return classes.join(' ')
    },
    
    // 获取排名徽章样式类
    getRankBadgeClass(index) {
      if (index === 0) return 'gold'
      if (index === 1) return 'silver'
      if (index === 2) return 'bronze'
      return 'normal'
    },
    
    // 获取排名徽章文本
    getRankBadgeText(index) {
      if (index === 0) return '🥇'
      if (index === 1) return '🥈'
      if (index === 2) return '🥉'
      return ''
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        online: 'online',
        offline: 'offline',
        busy: 'busy',
        away: 'away'
      }
      return statusMap[status] || 'offline'
    },
    
    // 获取趋势样式类
    getTrendClass(trend) {
      if (trend > 0) return 'up'
      if (trend < 0) return 'down'
      return 'stable'
    },
    
    // 获取趋势图标
    getTrendIcon(trend) {
      if (trend > 0) return '📈'
      if (trend < 0) return '📉'
      return '➡️'
    },
    
    // 获取趋势文本
    getTrendText(trend) {
      if (trend > 0) return `+${trend}`
      if (trend < 0) return `${trend}`
      return '0'
    },
    
    // 获取排名变化样式类
    getRankChangeClass(change) {
      if (change > 0) return 'up'
      if (change < 0) return 'down'
      return 'stable'
    },
    
    // 获取排名变化图标
    getRankChangeIcon(change) {
      if (change > 0) return '⬆️'
      if (change < 0) return '⬇️'
      return '➡️'
    },
    
    // 获取排名变化文本
    getRankChangeText(change) {
      if (change > 0) return `上升 ${change} 名`
      if (change < 0) return `下降 ${Math.abs(change)} 名`
      return '无变化'
    }
  }
}
</script>

<style scoped>
.trust-leaderboard {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20rpx;
  color: white;
}

/* 排行榜头部 */
.leaderboard-header {
  text-align: center;
  margin-bottom: 30rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 30rpx;
  backdrop-filter: blur(10rpx);
}

.leaderboard-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
  text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}

.leaderboard-subtitle {
  font-size: 24rpx;
  opacity: 0.8;
  margin-bottom: 20rpx;
  display: block;
}

/* 时间筛选 */
.time-filter {
  display: flex;
  gap: 12rpx;
  justify-content: center;
}

.filter-item {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-item.active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.filter-text {
  font-size: 20rpx;
  color: white;
}

/* 当前用户排名 */
.current-user-rank {
  margin-bottom: 30rpx;
}

.rank-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.rank-info {
  text-align: center;
}

.rank-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 4rpx;
}

.rank-label {
  font-size: 18rpx;
  color: #666;
}

.user-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.avatar-icon {
  font-size: 28rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.user-trust {
  font-size: 20rpx;
  color: #666;
}

.rank-change {
  text-align: center;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
}

.rank-change.up {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.rank-change.down {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.rank-change.stable {
  background: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
}

.change-icon {
  font-size: 16rpx;
  margin-right: 4rpx;
}

.change-text {
  font-size: 16rpx;
}

/* 排行榜列表 */
.leaderboard-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 12rpx;
  transition: all 0.3s ease;
  cursor: pointer;
  background: white;
  border: 1rpx solid #e0e0e0;
}

.leaderboard-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.leaderboard-item.top-three {
  background: linear-gradient(135deg, #fff9c4 0%, #fff3e0 100%);
  border-color: #ffc107;
}

.leaderboard-item.current-user {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-color: #2196f3;
}

.leaderboard-item.highlighted {
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  border-color: #4caf50;
}

/* 排名 */
.item-rank {
  text-align: center;
  margin-right: 20rpx;
  min-width: 80rpx;
}

.rank-number {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.rank-badge {
  padding: 2rpx 8rpx;
  border-radius: 12rpx;
  font-size: 16rpx;
  font-weight: bold;
}

.rank-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #b8860b;
}

.rank-badge.silver {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #666;
}

.rank-badge.bronze {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: #8b4513;
}

.rank-badge.normal {
  background: #f5f5f5;
  color: #999;
}

.badge-text {
  font-size: 14rpx;
}

/* 用户信息 */
.item-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.user-avatar {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.avatar-icon {
  font-size: 24rpx;
}

.avatar-status {
  position: absolute;
  bottom: -2rpx;
  right: -2rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  border: 2rpx solid white;
}

.avatar-status.online {
  background: #4caf50;
}

.avatar-status.offline {
  background: #9e9e9e;
}

.avatar-status.busy {
  background: #f44336;
}

.avatar-status.away {
  background: #ff9800;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.user-title {
  font-size: 18rpx;
  color: #666;
  display: block;
  margin-bottom: 6rpx;
}

.user-tags {
  display: flex;
  gap: 6rpx;
  flex-wrap: wrap;
}

.user-tag {
  font-size: 14rpx;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
}

/* 信任值 */
.item-trust {
  text-align: center;
  margin-left: 20rpx;
  min-width: 100rpx;
}

.trust-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.trust-label {
  font-size: 16rpx;
  color: #666;
  display: block;
  margin-bottom: 6rpx;
}

.trust-trend {
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
  font-size: 14rpx;
  font-weight: bold;
}

.trust-trend.up {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.trust-trend.down {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.trust-trend.stable {
  background: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
}

.trend-icon {
  font-size: 12rpx;
  margin-right: 2rpx;
}

.trend-text {
  font-size: 12rpx;
}

/* 徽章 */
.item-badges {
  display: flex;
  gap: 6rpx;
  margin-left: 12rpx;
}

.badge-item {
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-size: 12rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.badge-item.achievement {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.badge-item.special {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.badge-item.vip {
  background: rgba(156, 39, 176, 0.1);
  color: #9c27b0;
}

.badge-icon {
  font-size: 10rpx;
}

.badge-text {
  font-size: 10rpx;
}

/* 加载更多 */
.load-more {
  text-align: center;
  margin-bottom: 30rpx;
}

.load-more-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 20rpx;
  padding: 12rpx 24rpx;
  font-size: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2rpx);
}

.btn-text {
  font-size: 18rpx;
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 40rpx;
  color: rgba(255, 255, 255, 0.8);
}

.loading-text {
  font-size: 24rpx;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60rpx 40rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  margin-bottom: 30rpx;
  display: block;
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 16rpx;
  padding: 12rpx 24rpx;
  font-size: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2rpx);
}

/* 统计信息 */
.leaderboard-stats {
  display: flex;
  gap: 16rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  padding: 20rpx;
  backdrop-filter: blur(10rpx);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-label {
  font-size: 18rpx;
  opacity: 0.8;
  display: block;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 24rpx;
  font-weight: bold;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-leaderboard {
    padding: 16rpx;
  }
  
  .rank-card {
    flex-direction: column;
    text-align: center;
    gap: 16rpx;
  }
  
  .leaderboard-item {
    flex-direction: column;
    text-align: center;
    gap: 16rpx;
  }
  
  .item-user {
    flex-direction: column;
    text-align: center;
  }
  
  .leaderboard-stats {
    flex-direction: column;
    gap: 12rpx;
  }
}
</style>

